{% extends 'admin/base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
<div id="contentWrapper">
  <el-container>
    <el-header>
      <el-page-header @back="javascript:history.go(-1);" content="导入学生数据"></el-page-header>
    </el-header>

    <el-main>
      <div style="text-align: center">
        <div id="drag-upload">
          <el-upload class="el-upload" drag action="{% url 'student-list' %}" :on-error="handleError" :on-success="handleSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，且不超过 2w 条记录</div>
          </el-upload>
        </div>
        <br/>
        <el-link type="primary" :href="`{% static 'templates/student-template.xls' %}`">导入模板下载</el-link>
      </div>
    </el-main>
  </el-container>
</div>
<script type="text/javascript">
  new Vue({
    el: '#contentWrapper',
    methods: {
      handleSuccess(response) {
        this.$notify({
          title: '上传成功',
          message: "",
          type:'success',
          dangerouslyUseHTMLString: true,
          showClose: false
        });
      },
      handleError(response) {
        const { message } = response;
        const body = JSON.parse(message);
        this.$notify({
          title: '解析失败',
          message: body.meta.details,
          type:'error',
          dangerouslyUseHTMLString: true,
          showClose: false
        });
      }
    }
  });
</script>
{% endblock %}